<script>

export default {
  name: 'BlogCommentList',
  data () {
    return {
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      searchInfo: {
        commentTimeRange: '',
        status: '',
        name: ''
      },
      blogId: '',
      show: false,
      tableList: [],
      delIds: [],
      commentTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    getTableList () {
      this.searchInfo.commentTimeRange = this.commentTime.toString()
      this.$axios.get('comment/page', {
        params: {
          ...this.pageInfo,
          ...this.searchInfo,
          blogId: this.blogId
        }
      }).then(data => {
        if (data.total === 0) {
          this.show = false
          this.$message.warning('暂无评论！')
        } else {
          this.show = true
          this.tableList = [...data.list]
          this.pageInfo.total = data.total
        }
      }).catch(e => e)
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getTableList()
    },
    sizeChange (val) {
      this.pageInfo.page = 1
      this.pageInfo.limit = val
      this.getTableList()
    },
    search () {
      this.pageInfo.page = 1
      this.getTableList()
    },
    clear () {
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.searchInfo = { ...this.$options.data().searchInfo }
      this.commentTime = []
      this.getTableList()
    },
    selectionChange (selection) {
      this.delIds = selection.map(item => item.blogId)
    },
    del (id) {
      let ids = []
      if (id) {
        ids = [id]
      } else {
        if (this.delIds.length === 0) {
          this.$message.error('请至少选中一条数据进行删除！')
          return false
        } else {
          ids = [...this.delIds]
        }
      }
      this.$confirm(`确定删除数据[${ids}]的数据吗?`, '询问').then(() => {
        this.$axios.delete('comment/delete', {
          params: { ids: ids.toString() }
        }).then(data => {
          if (data) {
            this.$message.warning(data)
          } else {
            this.$message.success('删除成功')
          }
          this.getTableList()
        }).catch(e => e)
      }).catch(() => {})
    },
    changeStatus (commentId) {
      this.$confirm(`确定修改编号[${commentId}]的状态吗?`, '询问', { type: 'info' }).then(() => {
        this.$axios.post(`comment/update/status/${commentId}`).then(() => {
          this.$message.success('操作成功！')
          this.getTableList()
        }).catch(e => e)
      }).catch(() => {})
    },
    init (blogId) {
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.searchInfo = { ...this.$options.data().searchInfo }
      this.tableList = []
      this.blogId = blogId
      this.getTableList()
    }
  }
}
</script>

<template>
  <el-dialog title="博客评论列表" :visible.sync="show">
    <el-card>
      <el-form :model="searchInfo" label-width="80px" inline>
        <el-form-item label="评论人">
          <el-input v-model="searchInfo.name" clearable placeholder="评论人"/>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker v-model="commentTime" start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange" range-separator="-" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"/>
        </el-form-item>
        <el-form-item label="数据状态">
          <el-select v-model="searchInfo.status" clearable placeholder="账号状态">
            <el-option :value="1" label="可用"/>
            <el-option :value="2" label="禁用"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search">查询</el-button>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button @click="del()">删除</el-button>
      <el-table :data="tableList" border @selection-change="selectionChange">
        <el-table-column type="selection" fixed="left"/>
        <el-table-column prop="commentId" label="编号"/>
        <el-table-column prop="name" label="评论人"/>
        <el-table-column prop="commentTime" label="评论时间"/>
        <el-table-column prop="content" label="评论内容" show-overflow-tooltip/>
        <el-table-column prop="status" label="数据状态">
          <template slot-scope="{row}">
            <el-button @click="changeStatus(row.commentId)" v-if="row.status === 1" type="success" title="点击切换状态">可用</el-button>
            <el-button @click="changeStatus(row.commentId)" v-else type="danger" title="点击切换状态">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="{row}">
            <el-button @click="del(row.commentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" :total="pageInfo.total" layout="total,prev,pager,next,jumper,sizes" @current-change="currentChange" @size-change="sizeChange"/>
    </el-card>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
